
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<span style="font-size:18px;">
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="extinct/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="extinct/css/commonly-used-show.css" />
    <script type="text/javascript" src="extinct/js/jquery.min.js"></script>
    <script type="text/javascript" src="extinct/js/bootstrap.js" ></script>
    <script type="text/javascript" src="extinct/js/jquery.cookie.js"></script>

    <!--时间选择 -->
    <link rel="stylesheet" type="text/css" href="extinct/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript" src="extinct/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="extinct/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

    <title>个人资料</title>


</head>
<body class="mybody">


<c:if test="${user_leve == 1}">
    <jsp:include page="theTopMenuAdmin.jsp" />
</c:if>

<c:if test="${user_leve == 2}">
    <jsp:include page="theTopMenuUser.jsp" />
</c:if>


<div class="container-fluid">
    <div class="row">


        <div class="col-md-12">
            <div class="col-md-12">
                    <div class="panel panel-primary">
                        <div class="panel-body">
                            <div class="alert alert-success">


                                <div class="container">
        <h3 style="text-align: center">用户个人资料信息</h3>
        <hr style="filter: alpha(opacity=100,finishopacity=0,style=3)" width="100%" color="#6f5999" size="3"/>

        <div id="personal_user" class="container">
            <div class="form-group same-line">
                <label>登录名或账号：</label>
                <input type="text" id="user_loing_name" readonly="readonly" class="form-control edit" placeholder="请输入登录名或账号">
            </div>

            <div class="form-group same-line-left">
                <label>用户类型：</label>
                <select disabled="disabled" class="form-control edit" title="请选择" id="user_level">
                    <option value="1">管理员</option>
                    <option value="2">普通用户</option>
                </select>
            </div>

            <div class="form-group same-line-left">
                <label >用户名：</label>
                <input type="text" id="user_name" class="form-control edit" placeholder="请输入用户名" >
            </div>

            <div class="form-group same-line">
                <label >用户性别：</label>
                <select class="form-control edit" title="请选择" id="user_sex" >
                    <option value="" disabled selected hidden>请选择</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>

            <div class="form-group same-line-left">
                <label >用户邮箱：</label>
                <input type="email" id="user_email" class="form-control edit" placeholder="请输入用户邮箱" >
            </div>

            <div class="form-group same-line-left">
                <label >生日：</label>
                <div class="controls input-append date form_datetime" data-date-format="dd MM yyyy - HH:ii p" data-link-field="user_brithday">
                    <input id="user_brithday" class="form-control edit" size="16" type="text" readonly placeholder="请选择" />
                    <span class="add-on"><i class="icon-remove"></i></span>
                    <span class="add-on"><i class="icon-th"></i></span>
                </div>
                <input class="form-control edit" type="hidden" />
            </div>

            <div class="form-group same-line">
                <label >用户地址：</label>
                <input type="text" id="user_address" class="form-control edit" placeholder="请输入地址" >
            </div>

            <div class="form-group same-line-left">
                <label >用户手机号：</label>
                <input type="text" id="user_tel" class="form-control edit" placeholder="请输入用户手机号">
            </div>

            <div class="form-group same-line-left">
                <label >用户头像：</label>
                <div>
                     <img style="float: left" id="head_port" src="purchase/img/head_portrait.png" width="90px" height="90px" >
                    <input type="file" onChange="selectImage(this)" style="width: 190px; float: right; margin-top: 30px; margin-left: 10px;">
                </div>

            </div>

        </div>

        <div class="form-group text-center same-line-clear">
            <input type="button" value="修改" class="btn btn-primary" onclick="picture()">
            <input type="reset" value="重置" class="btn btn-danger interval" onclick="reset()">
        </div>

        <div class="text-center">
            <span id="user_messge" style="font-size:10px; color: red;"></span>
        </div>

</div>


                            </div>
                        </div>
                    </div>
                </div>
        </div>



    </div>

 </div>





<script type="text/javascript">
    var userdt = JSON.parse(sessionStorage.getItem("user"));
    if (userdt.data.userName != null){
        $("#usname").text(userdt.data.userName);
    }else {
        $("#usname").text(userdt.data.userLoginName);
    }
    var graphic;
    var imgurl = "";

    function reset(){
        var addUser = document.getElementById("personal_user");
        var ipts = addUser.getElementsByTagName("input");
        for (var i = 0; i < ipts.length; i++){
            ipts[i].value = "";
        }
    }


    window.onload = function(){
        userInfo();
        userLeve();
    }

    function userLeve(){
        if(userdt.data.userLevel === "1"){

        }else if (userdt.data.userLevel === "2"){
            $("#user_loing_name").attr("readOnly",true);
            $("#user_level").attr("disabled",true);
        }
    }

    function userInfo(){
        var postUrl = "${pageContext.request.contextPath}/member/getUserInfo";

        var str = {
            "id": userdt.data.id
        };

        $.ajax({
            type:"post",
            url:postUrl,
            headers: {
                "Content-Type":"application/json"
            },
            data:JSON.stringify(str),
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            success:function(result){
                if (result.code === 502){
                    $("#user_messge").text(result.data);
                }else {
                    $("#user_loing_name").val(result.data.userLoginName);
                    $("#user_level").val(result.data.userLevel);
                    $("#user_name").val(result.data.userName);
                    $("#user_sex").val(result.data.userSex);
                    $("#user_email").val(result.data.userEmail);
                    $("#user_brithday").val(result.data.userBrithday);
                    $("#user_address").val(result.data.userAddress);
                    $("#user_tel").val(result.data.userTel);

                    if (result.data.userHeadUrl != null){
                        $("#head_port").attr("src", "${pageContext.request.contextPath}" + result.data.userHeadUrl);
                    }

                }

            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });

    }

    function picture(){
        if (graphic != null){
            uploaimg();
        }else {
            imgurl = userdt.data.userHeadUrl;
            updetaUser();
        }
    }

    function updetaUser(){
        var userName = $("#user_name").val();
        var userSex = $("#user_sex").val();
        var userEmail = $("#user_email").val();
        var userBrithday = $("#user_brithday").val();
        var userAddress = $("#user_address").val();
        var userTel = $("#user_tel").val();

        var postUrl = "${pageContext.request.contextPath}/member/userInformation";
        var str = {
            "id": userdt.data.id,
            "userName": userName,
            "userSex": userSex,
            "userEmail": userEmail,
            "userBrithday": userBrithday,
            "userAddress": userAddress,
            "userTel": userTel,
            "userHeadUrl": imgurl
        };

        $.ajax({
            type:"post",
            url:postUrl,
            headers: {
                "Content-Type":"application/json"
            },
            data:JSON.stringify(str),
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            success:function(result){
                if (result.code === 502){
                    $("#user_messge").text(result.data);
                }else {
                    location.reload();
                }

            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });
    }

    function uploaimg(){

        var postUrl = "${pageContext.request.contextPath}/uploadFile";
        var formData = new FormData();
        formData.append("userId",userdt.data.createUserId);
        formData.append("pictureUrl",graphic);    //生成一对表单属性
        $.ajax({
            type: "post",           //因为是传输文件，所以必须是post
            url: postUrl,         //对应的后台处理类的地址
            data: formData,
            processData: false,
            contentType: false,
            success: function (result) {
                if (result.code === 502){
                    $("#user_messge").text(result.data);
                }else {
                    imgurl = result.data.pictureUrl;
                    updetaUser();
                }
            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });

    }

    function selectImage(file) {
        if (!file.files || !file.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            document.getElementById("head_port").src = evt.target.result;
        }
        //通过文件流将文件转换成Base64字符串
        reader.readAsDataURL(file.files[0]);
        graphic = file.files[0];
    }

    //加载时间控件
    $('.form_datetime').datetimepicker({
        //默认语言
        language: 'zh-CN',
        //默认选择格式
        format: "yyyy-mm-dd hh:ii:ss",
        autoclose: true,
        todayBtn: true,
        startView: 2,
    });
</script>

</body>
</html>
</span>